<template>
  <div class="clearfix">
    <a-upload
      :action="action"
      listType="picture-card"
      :fileList="fileList"
      @preview="handlePreview"
      @change="handleChange"
      :headers="headers"
      accept="image/*"
    >
      <div v-if="fileList.length < 1">
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
      <img alt="example" style="width: 100%" :src="previewImage"/>
    </a-modal>
  </div>
</template>

<script>
  import { ACCESS_TOKEN } from "@/store/mutation-types"
  export default {
    name: "BisHouseUploadCover",
    props: {
      coverFiles: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        previewVisible: false,
        previewImage: '',
        fileList: this.coverFiles,
        loading: false,
        imageUrl: '',
        action: window._CONFIG['domianURL'] + '/sys/common/upload',
        headers: {'X-Access-Token': this.$ls.get(ACCESS_TOKEN)},
        tempImgBoxWidth: 0,
        tempImgBoxHeight: 0,
      }
    },
    methods: {
      handleCancel () {
        this.previewVisible = false
      },
      handlePreview (file) {
        this.previewImage = file.url || file.thumbUrl
        this.previewVisible = true
      },
      handleChange ({ file,fileList }) {
        if(file.status === 'done') {
          let code = file.response.code
          if(code === 200) {
            this.$emit('watchCoverId', file.response.result.id)
          }
        }
        this.fileList = fileList
      }
    }
  }
</script>

<style scoped>
  .clearfix{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .ant-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }

  .ant-upload-select-picture-card .ant-upload-text {
    margin-top: 8px;
    color: #666;
  }
</style>